import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.scss'

interface IProps {
  size?: string | number
  color?: string | number
}

export default class LoadingRing extends Component<IProps> {
  render() {
    const { color, size } = this.props
    const loadingSize = typeof size === 'string' ? size : String(size)
    const sizeStyle = {
      width: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : '',
      height: size ? `${Taro.pxTransform(parseInt(loadingSize))}` : ''
    }
    const colorStyle = {
      border: color ? `1px solid ${color}` : '',
      'border-color': color
        ? `${color} transparent transparent transparent`
        : ''
    }
    const ringStyle = Object.assign({}, colorStyle, sizeStyle)

    return (<View className='fy-loading' style={sizeStyle}>
      <View className='fy-loading__ring' style={ringStyle}/>
      <View className='fy-loading__ring' style={ringStyle}/>
      <View className='fy-loading__ring' style={ringStyle}/>
    </View>)
  }
}
